/**
 * Created by Jimmy on 2018/12/16.
 */
<template>
  <div class="distribution-detail-box detail-box">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/panel/project/distribution' }">产值分配</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/panel/project/distributiondetail' }">分配详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="primary" class="fr" size="small" plain @click="backWard">返回</el-button>
    <ul class="disdetial">
      <li v-for="(item,index) in distributeList" :key="index">
        <span class="disspan">{{item.label}}</span>
        :
        <span>{{item.value}}</span>
      </li>
    </ul>
    <div class="detail-table-title mb-10">
      <h4>产值分配记录</h4>
      <el-button type="primary" size="small" class="fr" @click="newAllocation">新建分配记录</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      :stripe= 'true'
      style="width:100%">
      <el-table-column type="index" label="序号" align="center" width="100"></el-table-column>
      <el-table-column prop="AllocatedAmount" label="分配产值金额" align="center" width="200"></el-table-column>
      <el-table-column prop="CreatedDate" label="分配时间" align="center" width="200"></el-table-column>
      <el-table-column prop="Detail" label="分配比例/金额" align="center"></el-table-column>
      <el-table-column label="分配时间" align="center" width="150">
        <template slot-scope="scope">
          <el-button type="danger" plain size="small" @click="delRow(scope.row.ID)">删除</el-button>
          <el-button type="primary" size="small" @click="loadAllocationDetail(scope.row.AllocatedAmount,scope.row.ID)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--<el-pagination-->
      <!--@current-change="handleCurrentChange"-->
      <!--:current-page="currentPage"-->
      <!--layout="total, prev, pager, next, jumper"-->
      <!--:total="total">-->
    <!--</el-pagination>-->
    <el-dialog title="产值分配" :visible.sync="dialogFormVisible" center>
      <el-form v-model="form" ref="form">
        <el-form-item label="本次分配金额：" class="inline-label">
          <el-input size="small" v-model="form.distributeTotal" :placeholder="'待分配 ¥ '+ remain"></el-input>
        </el-form-item>
        <div>
          <h4>项目负责人：</h4>
          <ul>
            <li v-for="item in form.pChargePList" :key="item.index" class="cz-dialog-list">
              <el-row :gutter="20">
                <el-col :span="4">
                  <label>{{item.UserName}}：</label>
                </el-col>
                <el-col :span="10">
                  <el-input v-model="item.AllocatedPercent" size="small" placeholder="请输入分配比例"></el-input>
                </el-col>
                <el-col :span="4">
                  <span>￥{{(form.distributeTotal * item.AllocatedPercent).toFixed(2)}}</span>
                </el-col>
              </el-row>
            </li>
          </ul>
        </div>
        <div>
          <h4>质检人员：</h4>
          <ul>
            <li v-for="item in form.pQcoePList" :key="item.index" class="cz-dialog-list">
              <el-row :gutter="20">
                <el-col :span="4">
                  <label>{{item.UserName}}：</label>
                </el-col>
                <el-col :span="10">
                  <el-input v-model="item.AllocatedPercent" size="small" placeholder="请输入分配比例"></el-input>
                </el-col>
                <el-col :span="4">
                  <span>￥{{(form.distributeTotal * item.AllocatedPercent).toFixed(2)}}</span>
                </el-col>
              </el-row>
            </li>
          </ul>
        </div>
        <div>
          <h4>参与人员：</h4>
          <ul>
            <li v-for="item in form.pTechP" :key="item.index" class="cz-dialog-list">
              <el-row :gutter="20">
                <el-col :span="4">
                  <label>{{item.UserName}}：</label>
                </el-col>
                <el-col :span="10">
                  <el-input v-model="item.AllocatedPercent" size="small" placeholder="请输入分配比例"></el-input>
                </el-col>
                <el-col :span="4">
                  <span>￥{{(form.distributeTotal * item.AllocatedPercent).toFixed(2)}}</span>
                </el-col>
              </el-row>
            </li>
          </ul>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAllocation">确 定</el-button>
            </span>
    </el-dialog>
  </div>

</template>
<script>
  export default {
    data(){
      return{
        distributeList:[
          {label:'项目名称',value:''},
          {label:'项目编号',value:''},
          {label:'部门产值',value:''},
          {label:'项目负责人',value:''},
          {label:'参与人员',value:''},
          {label:'质检人员',value:''},
          {label:'项目类型',value:''},
          {label:'待分配产值',value:''}
        ],
        tableData:[],
        total: 4,
        remain:0,
        currentPage: 1,
        dialogFormVisible:false,
        engineers:[],
        pmid:0,
        QccoeUser:0,
        pmname:'',
        projectid:'',
        allocationid:'',
        form:{
          distributeTotal:'',
          pQcoePList:[],
          pChargePList:[],
          pTechP:[]
        }
      }
    },
    created: function(){
      let user = JSON.parse(window.localStorage.getItem('access-user'))
      this.token = user.Token
      this.loadList(this.currentPage,true)
    },
    methods:{
      saveAllocation () {
        var args = {
          token:this.token,
          projectid: this.projectid,
        }
        var amount = parseFloat(this.form.distributeTotal)
        if(isNaN(amount) || amount <= 0){
          this.$message.error("本次分配金额有误")
          return
        }
        args.amount = amount
        if (this.allocationid !== '') {
          args.allocationid = this.allocationid
        }
        var ids = this.form.pChargePList[0].UserID + ',' + this.form.pQcoePList[0].UserID + ','
        var percents = this.form.pChargePList[0].AllocatedPercent + ','
        if (this.form.pQcoePList[0].AllocatedPercent === '') {
          percents += '0,'
        } else {
          percents += this.form.pQcoePList[0].AllocatedPercent + ','
        }
        this.form.pTechP.forEach((obj) => {
          ids += obj.UserID +','
          if (obj.AllocatedPercent === '') {
            percents += '0,'
          } else {
            percents += obj.AllocatedPercent + ','
          }
        })
        args.ids = ids
        args.percents = percents
        console.log(args)
        this.$http.post(this.domain + '/allocation/edit',
          args
        ).then((response) => {
          if (response.data.Success) {
            this.$message.success(response.data.Msg)
            this.loadList(this.currentPage,false)
            this.dialogFormVisible = false
          } else {
            this.$message.error(response.data.Msg)
          }
        }).catch(function (response) {
          this.$message.error(response.data)
        })

      },
      newAllocation () {
        this.allocationid = ''
        if (this.QcoeUser === 0) {
          this.$message.error("尚未通过质检！")
          return
        }
        if (this.remain === 0){
          this.$message.error("无可分配产值！")
          return
        }
        this.dialogFormVisible = true
        this.form.distributeTotal = ''
        var idx = 0
        this.form.pTechP = []
        this.engineers.forEach((obj,index) => {
          var u = {
            UserID:obj.ID,
            UserName:obj.RealName,
            AllocatedPercent:'',
            AllocatedMoney:0
          }
          this.form.pTechP.push(u)
        })
        this.form.pChargePList = [
          {
            UserID:this.pmid,
            UserName:this.pmname,
            AllocatedPercent:'',
            AllocatedMoney:0
          }
        ]
        this.form.pQcoePList = [
          {
            UserID:this.QcoeUser,
            UserName:this.QcoeName,
            AllocatedPercent:'',
            AllocatedMoney:0
          }
        ]

      },
      loadAllocationDetail (total,id) {
        this.form.distributeTotal = total
        this.allocationid = id
        this.$http.post(this.domain + '/allocation/detail',
          {
            token:this.token,
            allocationid:id
          }
        ).then((response) => {
          if (response.data.Success) {
            console.log(response.data)
            var idx = 0
            var qcoeid = 0
            response.data.Details.forEach((obj,index) => {
              if (obj.UserID === this.pmid && !obj.IsQc) {
                idx = index
              }
            })
            this.form.pChargePList = response.data.Details.splice(idx,1)
            response.data.Details.forEach((obj,index) => {
              if (obj.IsQc) {
                qcoeid = index
              }
            })
            this.form.pQcoePList = response.data.Details.splice(qcoeid,1)
            this.form.pTechP = response.data.Details
            this.dialogFormVisible = true
          } else {
            this.$message.error(response.data.Msg)
          }
        }).catch(function (response) {
          this.$message.error(response.data)
        })
      },
      loadList(page,flag) {
        this.projectid = parseInt(this.$route.query.id)
        var args = {
          token:this.token,
          projectid: this.projectid,
          page:page
        }
//        console.log(args)
        this.$http.post(this.domain + '/allocation/list',
          args
        ).then((response) => {
          if (response.data.Success) {
//            console.log(response.data)
            this.pmid = response.data.ProjectInfo.PmID
            this.QcoeUser = response.data.ProjectInfo.QcoeUser
            this.QcoeName = response.data.ProjectInfo.QcoeName
            this.engineers = response.data.ProjectInfo.Engineers
            this.distributeList[0].value = response.data.ProjectInfo.ProjectName
            this.distributeList[1].value = response.data.ProjectInfo.ProjectNumber
            this.distributeList[2].value = "¥ "+ response.data.ProjectInfo.DepartmentOutput
            this.distributeList[3].value = response.data.ProjectInfo.PmName
            this.distributeList[5].value = response.data.ProjectInfo.QcoeUser === 0? "尚未质检" : response.data.ProjectInfo.QcoeName

            this.distributeList[6].value = response.data.ProjectInfo.ProjectTypeName
            this.distributeList[7].value = "¥ "+response.data.ProjectInfo.RemainOutput
            this.remain = response.data.ProjectInfo.RemainOutput
            this.pmname = response.data.ProjectInfo.PmName
            this.distributeList[4].value = ''
            this.engineers.forEach((obj,index) => {
              this.distributeList[4].value += obj.RealName + '，'
            })
            this.tableData = response.data.Allocations
            this.total = response.data.Total
            if(flag){
              this.$message.success(response.data.Msg)
            }
          } else {
            this.$message.error(response.data.Msg)
          }
        }).catch(function (response) {
          this.$message.error(response.data)
        })
      },
      delRow (ID){
        this.$http.post(this.domain + '/allocation/delete',
          {
            token:this.token,
            allocationid:ID
          }
        ).then((response) => {
          if (response.data.Success) {
            this.$message.success(response.data.Msg)
            this.loadList(this.currentPage,false)
          } else {
            this.$message.error(response.data.Msg)
          }
        }).catch(function (response) {
          this.$message.error(response.data)
        })
      },
      handleCurrentChange(val){
        this.currentPage = val;
        this.loadList(this.currentPage,true)
      },
      backWard(){
        this.$router.go(-1)
      }
    }
  }
</script>
<style>
  .disdetial{
    margin-top: 40px;
    margin-bottom: 10px;
    background-color: #f8f9fb;
    padding: 10px;

  }
  .distribution-detail-box >h4{
    display: inline-block;
  }
  .distribution-detail-box li{
    line-height: 30px;
  }
  .disspan{
    font-weight: 700;
  }

  .distribution-detail-box li span:first-child{
    width: 80px;
    display: inline-block;
    text-align: right;
    padding-right: 10px;
  }
  .detail-table-title h4{
    display: inline-block;
    line-height: 32px;
  }
  .inline-label .el-form-item__content{
    display: inline-block;
  }
  .cz-dialog-list{
    margin-bottom: 10px;
  }
  /*.el-pager li.number{*/
  /*line-height: 8px;*/
  /*}*/
</style>
